<template>
	<div class="app-container">
		<el-form
			v-show="showSearch"
			ref="queryForm"
			:model="queryParams"
			:inline="true"
			label-width="68px"
		>
			<el-form-item :label="$t('dictionaries.parameterName')" prop="name">
				<el-input
					v-model="queryParams.name"
					:placeholder="$t('dictionaries.parameterNameInput')"
					clearable
					size="small"
					style="width: 240px"
					@keyup.enter.native="handleQuery"
				/>
			</el-form-item>
			<el-form-item :label="$t('dictionaries.parameterKey')" prop="key">
				<el-input
					v-model="queryParams.key"
					:placeholder="$t('dictionaries.parameterKeyInput')"
					clearable
					size="small"
					style="width: 240px"
					@keyup.enter.native="handleQuery"
				/>
			</el-form-item>
			<el-form-item :label="$t('dictionaries.systemBuild')" prop="isSys">
				<el-select
					v-model="queryParams.isSys"
					:placeholder="$t('dictionaries.systemBuild')"
					clearable
					size="small"
				>
					<el-option
						v-for="dict in typeOptions"
						:key="dict.value"
						:label="dict.label"
						:value="dict.value"
					/>
				</el-select>
			</el-form-item>
			<el-form-item :label="$t('elButton.establishTime')">
				<el-date-picker
					v-model="dateRange"
					size="small"
					style="width: 240px"
					value-format="yyyy-MM-dd"
					type="daterange"
					range-separator="-"
					:start-placeholder="$t('elButton.startTime')"
					:end-placeholder="$t('elButton.endTime')"
				/>
			</el-form-item>
			<el-form-item>
				<el-button
					type="primary"
					icon="el-icon-search"
					size="mini"
					@click="handleQuery"
					>{{ $t('elButton.search') }}</el-button
				>
				<el-button
					icon="el-icon-refresh-right"
					size="mini"
					@click="resetQuery"
					>{{ $t('elButton.reset') }}</el-button
				>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button
					v-hasPerm="['config_add']"
					type="primary"
					icon="el-icon-plus"
					size="mini"
					@click="handleAdd"
					>{{ $t('elButton.add') }}</el-button
				>
			</el-col>
			<el-col :span="1.5">
				<el-button
					v-hasPerm="['config_edit']"
					type="success"
					icon="el-icon-edit"
					size="mini"
					:disabled="single"
					@click="handleEdit"
					>{{ $t('elButton.change') }}</el-button
				>
			</el-col>
			<el-col :span="1.5">
				<el-button
					v-hasPerm="['config_del']"
					type="danger"
					icon="el-icon-delete"
					size="mini"
					:disabled="multiple"
					@click="handleDel"
					>{{ $t('elButton.delete') }}</el-button
				>
			</el-col>
			<div class="top-right-btn">
				<el-tooltip
					class="item"
					effect="dark"
					:content="$t('elButton.refresh')"
					placement="top"
				>
					<el-button
						size="mini"
						circle
						icon="el-icon-refresh"
						@click="handleQuery"
					/>
				</el-tooltip>
				<el-tooltip
					class="item"
					effect="dark"
					:content="
						showSearch ? $t('elButton.hideSearch') : $t('elButton.showSearch')
					"
					placement="top"
				>
					<el-button
						size="mini"
						circle
						icon="el-icon-search"
						@click="showSearch = !showSearch"
					/>
				</el-tooltip>
			</div>
		</el-row>

		<el-table
			v-loading="loading"
			:data="configList"
			@selection-change="handleSelectionChange"
		>
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column
				:label="$t('dictionaries.parameterMainKey')"
				align="center"
				prop="id"
			/>
			<el-table-column
				:label="$t('dictionaries.parameterName')"
				align="center"
				prop="name"
				:show-overflow-tooltip="true"
			/>
			<el-table-column
				:label="$t('dictionaries.parameterKey')"
				align="center"
				prop="key"
				:show-overflow-tooltip="true"
			/>
			<el-table-column
				:label="$t('dictionaries.parameterKeyValue')"
				align="center"
				prop="value"
			/>
			<el-table-column
				:label="$t('dictionaries.systemBuild')"
				align="center"
				prop="isSys"
				:formatter="typeFormat"
			/>
			<el-table-column
				:label="$t('equipment.remarks')"
				align="center"
				prop="remarks"
				:show-overflow-tooltip="true"
			/>
			<el-table-column
				:label="$t('elButton.establishTime')"
				align="center"
				prop="createTime"
				width="180"
			>
				<template slot-scope="scope">
					<span>{{ parseTime(scope.row.createTime) }}</span>
				</template>
			</el-table-column>
			<el-table-column
				:label="$t('equipment.control')"
				align="center"
				class-name="small-padding fixed-width"
				width="150"
				fixed="right"
			>
				<template slot-scope="scope">
					<el-button
						v-hasPerm="['config_edit']"
						size="mini"
						type="text"
						icon="el-icon-edit"
						@click="handleEdit(scope.row)"
						>{{ $t('elButton.change') }}</el-button
					>
					<el-button
						v-hasPerm="['config_del']"
						size="mini"
						type="text"
						icon="el-icon-delete"
						@click="handleDel(scope.row)"
						>{{ $t('elButton.delete') }}</el-button
					>
				</template>
			</el-table-column>
		</el-table>

		<pagination
			v-show="total > 0"
			:total="total"
			:page.sync="queryParams.current"
			:limit.sync="queryParams.size"
			@pagination="getList"
		/>

		<!-- 添加或修改参数配置对话框 -->
		<el-dialog
			:title="title"
			:visible.sync="open"
			width="500px"
			:modal-append-to-body="true"
			:append-to-body="true"
			:close-on-click-modal="false"
		>
			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
				<el-form-item :label="$t('dictionaries.parameterName')" prop="name">
					<el-input
						v-model="form.name"
						:placeholder="$t('dictionaries.parameterNameInput')"
					/>
				</el-form-item>
				<el-form-item :label="$t('dictionaries.parameterKey')" prop="key">
					<el-input
						v-model="form.key"
						:placeholder="$t('dictionaries.parameterKeyInput')"
					/>
				</el-form-item>
				<el-form-item
					:label="$t('dictionaries.parameterKeyValue')"
					prop="value"
				>
					<el-input
						v-model="form.value"
						:placeholder="$t('dictionaries.parameterKeyValueInput')"
					/>
				</el-form-item>
				<el-form-item :label="$t('dictionaries.systemBuild')" prop="isSys">
					<el-radio-group v-model="form.isSys">
						<el-radio
							v-for="dict in typeOptions"
							:key="dict.value"
							:label="dict.value"
							>{{ dict.label }}</el-radio
						>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="上传图片" prop="picture">
					<el-upload
						class="upload-demo"
						action="https://jsonplaceholder.typicode.com/posts/"
						:on-change="handlePreview"
						:show-file-list="false"
						:auto-upload="false"
            list-type="picture"
					>
						<el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传png文件</div>
					</el-upload>
				</el-form-item>
				<el-form-item :label="$t('equipment.remarks')" prop="remarks">
					<el-input
						:disabled="form.key == 'auditSwitch'"
						v-model="form.remarks"
						type="textarea"
						:placeholder="$t('equipment.remarksInput')"
					/>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">{{
					$t('submitText')
				}}</el-button>
				<el-button @click="cancel">{{ $t('cancelText') }}</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import {
	listConfig,
	getConfig,
	delConfig,
	addConfig,
	editConfig,
	uploadLogo,
} from '@/api/system/config'

export default {
	name: 'Config',
	data() {
		return {
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 总条数
			total: 0,
			// 参数表格数据
			configList: [],
			// 弹出层标题
			title: '',
			// 是否显示弹出层
			open: false,
			// 类型数据字典
			typeOptions: [],
			// 日期范围
			dateRange: [],
			// 上传的logo文件
			uploadLogo: null,
			// 查询参数
			queryParams: {
				current: 1,
				size: 10,
				name: undefined,
				key: undefined,
				isSys: undefined,
			},
			// 显示搜索条件
			showSearch: true,
			// 表单参数
			form: {},
			// 表单校验
			rules: {
				name: [
					{
						required: true,
						message: this.$t('dictionaries.parameterNameEmpty'),
						trigger: 'blur',
					},
				],
				key: [
					{
						required: true,
						message: this.$t('dictionaries.parameterKeyEmpty'),
						trigger: 'blur',
					},
				],
				value: [
					{
						required: true,
						message: this.$t('dictionaries.parameterKeyValueEmpty'),
						trigger: 'blur',
					},
				],
			},
		}
	},
	created() {
		this.getList()
		this.getDicts('yes_no').then((response) => {
			this.typeOptions = response.data
		})
	},
	methods: {
		// 处理文件上传保存
		handlePreview(file) {
			this.uploadLogo = new FormData()
			this.uploadLogo.append('file', file.raw)
		},
		/** 查询参数列表 */
		getList() {
			this.loading = true
			listConfig(this.addDateRange(this.queryParams, this.dateRange)).then(
				(response) => {
					this.configList = response.data
					this.total = response.total
					this.loading = false
				}
			)
		},
		// 参数系统内置字典翻译
		typeFormat(row, column) {
			return this.selectDictLabel(this.typeOptions, row.isSys)
		},
		// 取消按钮
		cancel() {
			this.open = false
			this.reset()
		},
		// 表单重置
		reset() {
			this.form = {
				id: undefined,
				name: undefined,
				key: undefined,
				value: undefined,
				isSys: '0',
				remarks: undefined,
			}
			this.resetForm('form')
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.current = 1
			this.getList()
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.dateRange = []
			this.resetForm('queryForm')
			this.handleQuery()
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset()
			this.open = true
			this.title = this.$t('dictionaries.addParameter')
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map((item) => item.id)
			this.single = selection.length !== 1
			this.multiple = !selection.length
		},
		/** 修改按钮操作 */
		handleEdit(row) {
			this.reset()
			const id = row.id || this.ids
			getConfig(id).then((response) => {
				this.form = response.data
				this.open = true
				this.title = this.$t('dictionaries.changeParameter')
			})
		},
		/** 提交按钮 */
		submitForm: function() {
			this.$refs['form'].validate((valid) => {
				if (valid) {
          let isSuccess = true
					if (this.form.key === 'logo') {
						uploadLogo(this.uploadLogo).then((response) => {
               isSuccess = response.code === 0
              this.$message({
                type: isSuccess ? 'success' : 'warning',
                message:response.msg
              })
						})
					}
          if(!isSuccess) return 
					if (this.form.id !== undefined) {
						editConfig(this.form).then((response) => {
							if (response.code === 0) {
								this.msgSuccess(this.$t('loginLog.changeSuccess'))
								this.open = false
								// this.getList()
								location.reload([true])
							} else {
								this.msgError(response.msg)
							}
						})
					} else {
						addConfig(this.form).then((response) => {
							if (response.code === 0) {
								this.msgSuccess(this.$t('addSuccess'))
								this.open = false
								location.reload([true])
								// this.getList()
							} else {
								this.msgError(response.msg)
							}
						})
					}
				}
			})
		},
		/** 删除按钮操作 */
		handleDel(row) {
			const ids = row.id || this.ids
			this.$confirm(
				this.$t('dictionaries.deleteParameter') +
					ids +
					this.$t('equipment.deleteEquipment2'),
				this.$t('warning'),
				{
					confirmButtonText: this.$t('submitText'),
					cancelButtonText: this.$t('cancelText'),
					type: 'warning',
				}
			)
				.then(function() {
					return delConfig(ids)
				})
				.then(() => {
					this.getList()
					this.msgSuccess(this.$t('deleteSuccess'))
				})
				.catch(function() {})
		},
	},
}
</script>
